<style>
.el-input__inner {
  border-radius: 92px;
  border-color: green;
}

.el-icon-arrow-right:before {
  margin-left: -11px;
}

.top-div {
  width: 400px;
  height: 114px;
  position: relative;
}

.el-input__icon {
  position: absolute;
  left: 3px;
  top: 1px;
}

.searchButton {
  position: absolute;
  left: 355px;
  top: 4px;
  border-radius: 10px;
  border-color: green;
  background-color: green;
}

.titleSpan {
  position: absolute;
  top: 14px;
  font-size: 17px;
}

.notReturnButton {
  position: absolute;
  top: 60px;
  left: 100px;
}

.isReturnButton {
  position: absolute;
  top: 60px;
  left: -5px;
}

.el-table--border th.el-table__cell, .el-table__fixed-right-patch {
  background-color: #333333;
  color: #ffffff;
}

</style>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 19px;">
        <i class="el-icon-s-home"></i> 个人中心
      </el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 17px">用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="margin: 24px 0 12px 0">
      <el-divider></el-divider>
    </div>

    <div class="top-div">
      <span class="titleSpan">用户名/姓名</span>
      <el-input style="width: 250px;position: absolute;left: 100px;top: 3px;"
                prefix-icon="el-icon-search" v-model="searchUsername" placeholder="请输入用户名或姓名!"></el-input>
      <el-button class="searchButton" type="primary" icon="el-icon-search" @click="showByUsernamePage1()">查询</el-button>
      <el-button size="medium" round class="notReturnButton" :type="this.showCurrentList==1?'primary':''"
                 @click="showNotReturnPage1">非返乡人员
      </el-button>
      <el-button class="isReturnButton" round size="medium" :type="this.showCurrentList==2?'danger':''"
                 @click="showIsReturnPage1" slot="reference">返乡人员
      </el-button>
    </div>

    <!--  表格  -->
    <el-table
        empty-text="暂无数据，请再试一次！"
        class="table"
        :data="userData"
        border
        style="width: 100%">
      <el-table-column prop="id" header-align="center" align="center" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" :show-overflow-tooltip="true" header-align="center" align="center" label="用户名"
                       width="150"></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="姓名"
                       width="150"></el-table-column>
      <el-table-column prop="photo" header-align="center" align="center" label="头像" width="150">
        <template slot-scope="scope">
          <img
              style="width: 80px; height: 80px"
              :src="scope.row.photo<1?'':require('../img/user/'+scope.row.photo)"
              :alt="scope.row.photo<1?'未发布':'加载失败'">
        </template>
      </el-table-column>
      <el-table-column prop="age" header-align="center" align="center" label="年龄"
                       width="50"></el-table-column>
      <el-table-column prop="email" header-align="center" align="center" label="电子邮箱"
                       width="150"></el-table-column>
      <el-table-column prop="gender" header-align="center" align="center" label="性别"
                       width="50"></el-table-column>
      <el-table-column prop="identity" :show-overflow-tooltip="true" header-align="center" align="center" label="身份证"
                       width="200"></el-table-column>
      <el-table-column prop="address" :show-overflow-tooltip="true" header-align="center" align="center" label="居住地"
                       width="185"></el-table-column>
      <el-table-column header-align="center" align="center" label="是否返乡人员" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isReturnPeople==1?'danger':'success'">{{scope.row.isReturnPeople==1?'是':'否'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" header-align="center" align="center" label="注册时间"></el-table-column>
    </el-table>

    <div class="block" align="center" style="margin-top: 15px">
      <el-pagination
          v-show="notReturnShow"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="notReturn.page"
          :page-size="notReturn.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
      <el-pagination
          v-show="byUsernameShow"
          background
          @current-change="handleCurrentChange1"
          :current-page.sync="isReturn.page"
          :page-size="isReturn.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
      <el-pagination
          v-show="isReturnShow"
          background
          @current-change="handleCurrentChange2"
          :current-page.sync="byUsername.page"
          :page-size="byUsername.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchUsername:'',
      notReturnShow: false,
      byUsernameShow: false,
      isReturnShow: false,
      notReturn: {
        pageSize: 4,
        page: 1,
      },
      isReturn: {
        pageSize: 4,
        page: 1,
      },
      byUsername: {
        pageSize: 4,
        page: 1,
      },
      showCurrentList: 0,
      userData: [],
      totalCount: 0,
    };
  },
  methods: {
    //展示非返乡人员第一页
    showNotReturnPage1() {
      this.notReturn.page = 1;
      this.notReturnList();
    },
    //展示返乡人员第一页
    showIsReturnPage1() {
      this.isReturn.page = 1;
      this.isReturnList();
    },
    //展示根据用户名搜索列表第一页
    showByUsernamePage1() {
      this.byUsername.page = 1;
      this.byUsernameList();
    },

    //展示根据用户名搜索的用户
    byUsernameList() {
      this.isReturnShow = true;
      this.byUsernameShow = false;
      this.notReturnShow = false;
      let url = 'http://localhost:8081/user/' + this.byUsername.page + '/' + this.byUsername.pageSize + '/username=' + this.searchUsername + '/byUsernameList';
      console.log('查询用户名展示列表请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentList = 3;
          this.userData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      })
    },
    //展示返乡人员的用户
    isReturnList() {
      this.byUsernameShow = true;
      this.isReturnShow = false;
      this.notReturnShow = false;
      let url = 'http://localhost:8081/user/' + this.isReturn.page + '/' + this.isReturn.pageSize + '/isReturnPeopleList';
      console.log('展示返乡人员的用户请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentList = 2;
          this.userData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.notReturnList();
        }
      })
    },
    //展示非返乡人员的用户
    notReturnList() {
      this.showCurrentList = 1;
      this.notReturnShow = true;
      this.isReturnShow = false;
      this.byUsernameShow = false;
      let url = 'http://localhost:8081/user/' + this.notReturn.page + '/' + this.notReturn.pageSize+'/NotReturnPeopleList';
      console.log('展示非返乡人员的用户请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.userData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      })
    },
    
    //展示当前列表
    showCurrentUserList() {
      if (this.showCurrentList == 1) {
        this.showCurrentList = 0;
        this.notReturnList();
      } else if (this.showCurrentList == 2) {
        this.showCurrentList = 0;
        this.isReturnList();
      } else if (this.showCurrentList == 3) {
        this.showCurrentList = 0;
        this.byUsernameList();
      }
    },

    //非返乡人员当前页
    handleCurrentChange(val) {
      this.notReturn.page = val;
      this.showCurrentUserList();
      console.log(`当前页: ${val}`);
    },
    //返乡人员当前页
    handleCurrentChange1(val) {
      this.isReturn.page = val;
      this.showCurrentUserList();
      console.log(`当前页: ${val}`);
    },
    //根据用户名搜索当前页
    handleCurrentChange2(val) {
      this.byUsername.page = val;
      this.showCurrentUserList();
      console.log(`当前页: ${val}`);
    },
    //清空添加输入框
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.notReturnList();
  }
}
</script>

